<template>
    <div>
        <!-- 1. -->
        <!-- <button @click="btnClick">inputBtn</button>
        <h2>myinput: -----{{modelValue}}</h2> -->

<!-- 2. -->
        <input :value="modelValue" @input="inputChange">

<!-- 3. -->
        <input v-model="value">

        <!-- 4. -->
        <input v-model="value2">
    </div>
</template>
<script>
export default {
    props: {
        modelValue: String,
        title: String
    },
    emits: ["updata:modelValue","updata:title"],
    methods: {
        // btnClick() {
        //     this.$emit("updata:modelValue", "121212")
        // }
        inputChange(e) {
            this.$emit("updata:modelValue", e.target.value)
        }
    },
    computed: {
        value: {
            set(value){
                this.$emit("updata:modelValue", value)
            },
            get() {
               return this.modelValue
            }
        },
        value2: {
            set(tit) {
                this.$emit("updata:title", tit)
            },
            get() {
                return this.title;
            }
        }
    }
}
</script>
<style>
</style>
